<template>
	<view>
		<view class="u-skeleton">
			<navigator url="/pages/my/info/info" class="header bg-gradual-blue" v-if="userdetail.id > 0">
				<view class="u-flex user-box">
					<view class="u-m-r-30">
						<u-avatar :src="form.photo" size="100" mode="square" class="u-flex u-skeleton-fillet"></u-avatar>
					</view>
					<view class="u-flex-1">
						<view class="u-font-34 u-p-b-10 u-skeleton-rect">{{form.name}}</view>
					</view>
					<!-- 二维码 -->
					<view class="u-m-l-10 u-p-10" style="display: flex;">
						<!-- <span>
							<image class="u-skeleton-fillet" style="width: 50rpx; height: 50rpx; margin-right:10rpx ;"
								src="">
							</image>
						</span> -->
						<u-icon name="arrow-right" color="#fff" size="28"></u-icon>
					</view>
				</view>
			</navigator>
			<view class="header bg-gradual-blue" @click="isWechat = true" v-else>
				<view class="u-flex user-box">
					<view class="u-m-r-30">
						<u-avatar src="''" size="100" mode="square" class="u-flex u-skeleton-fillet"></u-avatar>
					</view>

					<view class="u-flex-1">
						<view class="u-font-34 u-p-b-10 u-skeleton-rect">未登录</view>
						<view class="u-font-24 u-skeleton-rect"><text>点击登录</text></view>
					</view>
					<view class="u-m-l-10 u-p-10">
						<u-icon name="arrow-right" color="#fff" size="28"></u-icon>
					</view>
				</view>
			</view>
			<!-- 账户余额 -->
			<view class="grid-box mt">
				<view class="head-title u-skeleton-rect"><text>账户余额</text></view>
				<view class="u-flex u-p-t-20">
					<view class="u-flex-1 orange">
						<text class="u-font-40 u-skeleton-rect" v-if="userdetail.id > 0">{{userdetail.balancetotal}}</text>
						<text class="u-font-40 u-skeleton-rect" v-else>--</text>
						<text class="u-font-30">元</text>
					</view>
					<view class="u-flex" v-if="userdetail.id > 0">
						<u-button :custom-style="{'padding': '24rpx 40rpx','margin-right': '30rpx'}" type="primary" size="medium" @click="goWithdrawal" :disable="userdetail.id == 0"><u-icon name="rmb-circle" size="32" class="u-p-r-4"></u-icon>提现</u-button>
						<u-button :custom-style="{'padding': '24rpx 40rpx'}" size="medium" @click="goWallet" :disable="userdetail.id == 0"><u-icon name="eye" size="32" class="u-p-r-4"></u-icon>查看</u-button>
					</view>
				</view>
			</view>
			<!-- 我的订单 -->
			<view class="grid-box">
				<view class="head-title"><text class="u-skeleton-rect">我的订单</text><text class="iconfont icon-gengduo more" @click="orderView"></text></view>
				<view class="my-order">
					<navigator @click="goViews('/pages/my/order/order')" class="item">
						<view class="">
							<view><text class="iconfont icon-dingdan bg u-font-52 u-skeleton-circle"></text></view>
							<view class="name"><text class="u-font-28 u-skeleton-rect">全部</text></view>
						</view>
					</navigator>
					<navigator @click="goViews('/pages/my/order/order?current=1')" class="item">
						<view class="">
							<view><text class="iconfont icon-dengdai2 bg u-font-52 u-skeleton-circle"></text></view>
							<view class="name"><text class="u-font-28 u-skeleton-rect">服务中</text></view>
						</view>
					</navigator>
					<navigator @click="goViews('/pages/my/order/order?current=2')" class="item">
						<view class="">
							<view><text class="iconfont icon-dianping bg u-font-52 u-skeleton-circle"></text></view>
							<view class="name"><text class="u-font-28 u-skeleton-rect">点评</text></view>
						</view>
					</navigator>
					<navigator @click="goViews('/pages/my/order/order?current=3')" class="item">
						<view class="">
							<view><text class="iconfont icon-iconfontzhizuobiaozhun0262 bg u-font-52 u-skeleton-circle"></text></view>
							<view class="name"><text class="u-font-28 u-skeleton-rect">已取消</text></view>
						</view>
					</navigator>
					<!-- <navigator @click="goViews('/pages/my/order/order?current=5')" class="item">
						<view class=""  @click="golist4">
							<view><text class="iconfont icon-dianping bg u-font-52"></text></view>
							<view class="name"><text>已完成</text></view>
						</view>
					</navigator> -->
				</view>
			</view>
			<!-- 我的服务 -->
			<view class="grid-box">
				<view class="head-title"><text class="u-skeleton-rect">我的服务</text></view>
				<view class="my-service">
					<view class="item">
						<view class="server-link-con">
							<button class="server-link" open-type="contact" hover-class="none">
								<view class="u-m-b-10"><text class="iconfont icon-zaixiankefu bg u-font-52 u-skeleton-circle"></text></view>
								<text class="u-font-28 u-skeleton-rect">在线咨询</text>
							</button>
						</view>
					</view>
					<navigator class="item" @click="goViews('/pages/my/addressSet/addressSet')">
						<view><text class="iconfont icon-dizhiguanli bg u-font-52 u-skeleton-circle"></text></view>
						<view class="name"><text class="u-font-28 u-skeleton-rect">地址管理</text></view>
					</navigator>
					<view class="item" @click="about">
						<view><text class="iconfont icon-guanyuwomen bg u-font-52 u-skeleton-circle"></text></view>
						<view class="name"><text class="u-font-28 u-skeleton-rect">关于我们</text></view>
					</view>
					<!-- <navigator class="item" @click="goViews('/pages/invite/invite')"
						v-if="webSetting.commissionsetting.user.openentry">
						<view class="" @click="golist5">
							<view><text class="iconfont icon-leijishouyi bg u-font-52 u-skeleton-circle"></text></view>
							<view class="name"><text class="u-font-28 u-skeleton-rect">邀请赚钱</text></view>
						</view>
					</navigator> -->
					<template v-if="userdetail.bindinfo">
						<template v-if="userdetail.bindinfo.operator">
							<view class="item" @click="showIdentities = true" v-if="userdetail.bindinfo.operator.id > 0">
								<view><text class="iconfont icon-yonghu bg u-font-52 u-skeleton-circle"></text></view>
								<view class="name"><text class="u-font-28 u-skeleton-rect">切换身份</text></view>
							</view>
						</template>
					</template>
					<template v-if="userdetail.databoardcity">
						<view class="item" @click="goViews('/pages/my/board/board')" v-if="userdetail.databoardcity.length > 0">
							<view><text class="iconfont icon-shuju bg u-font-52 u-skeleton-circle"></text></view>
							<view class="name"><text class="u-font-28 u-skeleton-rect">数据看板</text></view>
						</view>
					</template>
					<!-- <template v-if="isOperatorAdmin">
						<view class="item" @click="goViews('/pages/admin/menu/menu')">
							<view><text class="iconfont icon-yunyingshang bg u-font-52 u-skeleton-circle"></text></view>
							<view class="name"><text class="u-font-28 u-skeleton-rect">运营商管理</text></view>
						</view>
					</template>
					<template v-if="isFranchiseAdmin">
						<view class="item" @click="goViews('/pages/admin/franchise/menu/menu')">
							<view><text class="iconfont icon-jiamengshangguanli bg u-font-52 u-skeleton-circle"></text></view>
							<view class="name"><text class="u-font-28 u-skeleton-rect">加盟商管理</text></view>
						</view>
					</template> -->
				</view>
			</view>
		</view>
		<view class="u-p-t-30 u-p-b-30 u-text-center u-tips-color"><text>青猿回收</text><text v-if="version" class="u-font-20 u-p-l-20">V{{version}}</text></view>
		
		<common-tabbar :current="2"></common-tabbar>
		<!--引用骨架屏组件-->
		<u-skeleton :loading="loading" :animation="true" bgColor="#f3f4f6" el-color="#ffffff"></u-skeleton>
		<!-- 弹出登录方式 -->
		<login-wechat :isWechat="isWechat" @close="closeLogin" @update="updateData"></login-wechat>
		<!-- 领取回收码 -->
		<!-- <u-popup v-model="showCode" mode="center" border-radius="14" width="600" closeable>
			<view class="u-p-60 u-text-center">
				<u-icon name="checkmark-circle-fill" size="200" color="#19be6b"></u-icon>
				<view class="u-m-t-10"><text class="u-font-40">您已认领成功</text></view>
				<view class="u-m-t-10"><text class="u-font-426 u-tips-color">回收码</text></view>
				<view class="u-m-t-20 u-m-b-20"><text class="u-font-60 u-font-bold">{{barcode}}</text></view>
				<view class="u-m-b-20 u-m-t-20"><u-button type="primary" @click="getCodeAndOrder">立刻下单</u-button></view>
				<view><u-button class="u-flex-1" @click="showCode = false">关闭</u-button></view>
			</view>
		</u-popup> -->

		<!-- 选择切换身份 -->
		<u-popup v-model="showIdentities" mode="bottom" border-radius="14">
			<identities-list v-if="showIdentities" @hide="hideIdentitiesList"></identities-list>
		</u-popup>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				menuButtonTop: '44px',
				loading: true,
				pic: '',
				show: true,
				version: "",
				isWechat: false,
				isLogin: false,
				form:{
					mobile: '',
					sex: 1,
					email: '',
					photo: '',
					name: '',
					isadmin: false
				},
				// 领取回收码
				showCode: false,
				barcode: '',
				// 切换身份
				showIdentities: false,
				isAdmin: false
			}
		},
		computed: {
			...mapState({
				userdetail: state => state.userdetail,
				storeId: state => state.storeId,
				franchiseId: state => state.franchiseId,
				webSetting: state => state.webSetting
			}),
			current(){
				return getApp().globalData.current
			},
			// // 是否运营商管理员
			// isOperatorAdmin(){
			// 	let operatorlist = this.userdetail.bindinfo.operatorlist
				
			// 	if(operatorlist.length > 0){
			// 		this.$u.vuex('operatorid', operatorlist[0].id)
			// 		// 使用 some 方法检查是否有任意一个 franchise 的 ismanager 为 true
			// 		return operatorlist.some(item => item.ismanager === true);
			// 	}else{
			// 		return false
			// 	}
			// },
			// // 是否加盟商管理员
			// isFranchiseAdmin(){
			// 	let operatorlist = this.userdetail.bindinfo.operatorlist
			// 	if(operatorlist.length > 0){
			// 		// 使用 some 方法检查是否有任意一个 franchise 的 ismanager 为 true
			// 		return operatorlist.some(item => 
			// 			item.franchiselist.some(cell => cell.ismanager === true)
			// 		);
			// 	}else{
			// 		return false
			// 	}
			// }
		},
		onLoad() {
			// this.initData()
		},
		onShow() {
			getApp().globalData.current = 2
			// #ifdef MP-WEIXIN
			this.menuButtonTop = wx.getMenuButtonBoundingClientRect().top + 'px'
			this.version = wx.getAccountInfoSync().miniProgram.version
			// #endif
			console.log('user-userdetail:',this.userdetail)
			if(this.userdetail || this.userdetail.id > 0){
				this.initData()
			}else{
				this.isWechat = true
			}
			
			// console.log('是否为运营商管理员',this.isOperatorAdmin)
			// console.log('是否为加盟商管理员',this.isFranchiseAdmin)
		},
		onReady() {
			setTimeout(()=>{
				this.loading = false
			},500)
		},
		methods: {
			// 切换身份
			hideIdentitiesList(value){
				this.showIdentities = value
			},
			// 提现
			goWithdrawal(){
				if(this.userdetail.enterprisebalance > 0){
					uni.navigateTo({
						url: '/pages/my/wallet/accountList/accountList'
					})
				}else{
					uni.navigateTo({
						url: '/pages/my/wallet/cashOut/cashOut?userid='+this.userdetail.id
					})
				}
			},
			async initData(){
				// this.loading = true
				try {
					uni.showLoading({
						title: '加载中...'
					})
					await this.$store.dispatch('getDetails').then((res)=>{
						// this.$refs.withdrawal.getStatistics()
						console.log('my页面成功获取用户详情：',res)
						this.form = res
						if(this.form){
							if(this.form.photo != ''){
								this.form.photo = this.fileURL + this.form.photo	
							}
						}
					}).finally(()=>{
						// this.loading = false
						uni.hideLoading()
					})
					// await this.getMyWallet()

				} catch (err) {
					console.log('页面加载数据异常:',err)
					// this.loading = false
				}
				console.log('全部加载完成...')
			},
			orderView() {
				if (this.userdetail.id > 0) {
					uni.navigateTo({
						url: '/pages/my/order/order'
					})
				} else {
					this.isWechat = true
				}
			},
			goInfo() {
				uni.navigateTo({
					url: '/pages/my/info/info'
				})
			},
			goViews(url) {
				console.log('goViews:',url)
				if (this.userdetail.id > 0) {
					uni.navigateTo({
						url: url
					})
				} else {
					this.isWechat = true
				}
			},
			goWallet() {
				// wx.reportEvent("cash_use", {
				// 	"type": this.userdetail.type,
				// 	"mobile": this.userdetail.mobile,
				// 	"usename": this.userdetail.name,
				// 	"role": "用户在个人中心点击提现按钮"
				// })
				if (this.userdetail.id > 0) {
					if(this.userdetail.bindinfo.enterpriselist.length > 0){
						uni.navigateTo({
							url: '/pages/my/wallet/home/home'
						})
					}else{
						uni.navigateTo({
							url: '/pages/my/wallet/wallet'
						})
					}
				} else {
					this.isWechat = true
				}
			},
			about() {
				uni.navigateTo({
					url: '/pages/my/about/about'
				})
			},
			closeLogin(val) {
				this.isWechat = val
			},
			updateData(token) {
				console.log(token)
				this.$store.dispatch('getDetails').then((res)=>{
					this.form = res
					if(this.form.photo != ''){
						this.form.photo = this.fileURL + this.form.photo	
					}
				})
				this.getMyWallet()
			}
		}
	}
</script>

<style lang="scss" scoped>
	// ::v-deep{
	// 	.u-close{
	// 		padding-top: 0!important;
	// 	}
	// }
	.server-link-con {
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;

		.server-link {
			border: 0;
			background: rgba(0, 0, 0, 0);
			font-size: 14px;
			line-height: inherit;
			padding: 0;
			text-align: center;
			color: #303133;

			&:after {
				display: none;
			}
		}
	}

	.orange {
		color: $u-color-orange;
	}

	.header {
		color: #fff;
		padding: 60rpx 30rpx 160rpx 30rpx;
		margin-bottom: 10rpx;
		/* #ifdef MP-WEIXIN */
		padding-top: calc(44px + 80rpx + var(--status-bar-height));
		/* #endif */
		border-bottom-right-radius: 60rpx;
	}

	.top-bar {
		display: flex;

		.item {
			flex: 1;
			text-align: center;

			.name {}

			.num {
				color: $u-color-orange;
				font-size: 40rpx;
			}
		}

		.iconfont {
			// border: 1px solid $u-color-main;
			background-color: $u-color-main;
			color: #fff;
			border-radius: 10rpx;
			margin-bottom: 10rpx;
			font-size: 48rpx;
			display: inline-block;
			padding: 12rpx;
		}
	}

	// 宫格展示
	.grid-box {
		background-color: #fff;
		margin: 0 30rpx;
		padding: 30rpx;
		border-radius: 24rpx;
		margin-top: 30rpx;

		&.mt {
			position: relative;
			top: -150rpx;
			margin-bottom: -150rpx;
		}

		.head-title {
			font-size: 32rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.more {
				color: $u-tips-color;
				font-size: 28rpx;
			}
		}
	}

	// 我的订单
	.my-order {
		display: flex;

		.item {
			width: 25%;
			text-align: center;
			margin: 30rpx 0;

			.name {
				margin-top: 10rpx;
			}
		}
	}

	// 我的服务
	.my-service {
		display: flex;
		flex-wrap: wrap;

		// padding: 30rpx 0 0;
		.item {
			width: 25%;
			text-align: center;
			margin: 30rpx 0;
			position: relative;

			.name {
				margin-top: 10rpx;
			}
		}
	}
	
	.scan-box{
		margin-top: var(--status-bar-height);
		position: absolute;
		left: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 70rpx;
		height: 70rpx;
		background: rgba(0,0,0,0.2);
		border-radius: 50%;
		.text{
			color: #ffffff;
		}
	}
</style>